/*********************
人员变更日志
* */
<template>
     <div>
       <el-row style="margin:25px 0 0 0 ;">
         <div :height="searchheight">
          <span style="float:right;margin-top: -30px;cursor: pointer;" @click="searchchangeadvanced">
            {{ searchadvanced ? "查询条件收起" : "查询条件展开" }}
            <i :class="searchadvanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"/>
          </span>
           <div v-show="searchadvanced">
             <el-form :inline="true" :model="searchForm" class="form-inline">
               <el-form-item label="操作内容">
                 <el-select v-model="searchForm.content" placeholder="请选择操作内容">
                   <el-option
                     v-for="item in options"
                     :key="item.value"
                     :label="item.label"
                     :value="item.label">
                   </el-option>
                 </el-select>
               </el-form-item>
               <el-form-item label="原内容">
                 <el-input v-model="searchForm.oldData" placeholder="请输入原内容" :clearable="true"></el-input>
               </el-form-item>
               <el-form-item label="变更后内容">
                 <el-input v-model="searchForm.newData" placeholder="请输入变更后内容" :clearable="true"></el-input>
               </el-form-item>
               <el-form-item>
                 <el-button
                   icon="el-icon-search"
                   type="primary"
                   class="marginLeft"
                   @click="getDataList(1)"
                 >检索</el-button>
               </el-form-item>
             </el-form>
           </div>
         </div>
       </el-row>
       <el-row>
         <div style="margin-bottom: 10px;display: flex;justify-content: flex-end;padding-right: 10px"> <el-button type="primary" @click="goBack">返回</el-button></div>
         <div style="padding:10px 0 0 0;border-top: 1px solid #b0bde2;">
          <span style="margin-right: 10px">指标考核</span>
           <el-radio-group v-model="choosePerOrDept" @change="choosePerOrDeptChange">
             <el-radio :label="0">人员</el-radio>
             <el-radio :label="1">机构</el-radio>
           </el-radio-group>
         </div>
       </el-row>
       <el-row>
         <el-table
           style="width: 100%;margin-top:20px"
           :data="dataList"
           border
           stripe
           header-align="center"
           v-loading="dataListLoading"
         >
           <el-table-column type="index" :index="indexMethod" header-align="center" align="center" label="序号" width="55"></el-table-column>
           <el-table-column prop="assessUserName" align="center" label="编号" show-overflow-tooltip v-if="!choosePerOrDept"></el-table-column>
           <el-table-column prop="assessRealName" align="center" label="姓名"  show-overflow-tooltip  v-if="!choosePerOrDept"></el-table-column>
           <el-table-column prop="assessDeptName" align="center" label="部门" show-overflow-tooltip ></el-table-column>
           <el-table-column prop="content" align="center" label="操作内容" show-overflow-tooltip></el-table-column>
           <el-table-column prop="oldData" align="center" label="原内容" show-overflow-tooltip></el-table-column>
           <el-table-column prop="newData" align="center" label="变更后内容" show-overflow-tooltip></el-table-column>
           <el-table-column prop="createUserName" align="center" label="操作人" show-overflow-tooltip ></el-table-column>
           <el-table-column prop="createTime" align="center" label="变更时间" show-overflow-tooltip ></el-table-column>
         </el-table>
         <!--分页-->
         <div class="avue-crud__pagination">
           <el-pagination
             @size-change="sizeChangeHandle"
             @current-change="currentChangeHandle"
             :current-page="pageData.pageIndex"
             :page-sizes="[10, 20, 50, 100]"
             :page-size="pageData.pageSize"
             :total="pageData.totalPage"
             background
             layout="total, sizes, prev, pager, next, jumper"
           ></el-pagination>
         </div>
       </el-row>
     </div>
</template>

<script>

    import {logList} from "@/api/dailyExamine/targetExamine/perORtarChange"; //接口api
    export default {
        data() {
            return {
                options:[
                    {value:'0',label:'指标变更'},
                    {value:'1',label:'考核对象变更'}
                ],
                palnSubVisible: false,
                jsonData: [],
                ids: [],
                usercomment: false,
                choosePerOrDept: 0, //选择的是人员还是机构
                deptVisible: false, //机构考核组件显隐
                personVisible: false, //人员考核组件显隐
                searchheight: "0", //搜索组件的高度
                searchadvanced: true, //搜索的显隐
                searchForm: {}, //搜索对象
                dataListLoading: false, //表格是否加载
                dataList: [], //表格数组
                multipleSelection: [], //勾选数据
                pageData: {
                    //分页对象
                    pageIndex: 1,
                    pageSize: 10,
                    totalPage: 0
                },
                showChangPage:true
            };
        },
        components: {},
        methods: {
            init(){
                this.getDataList() ;
            },
            //  人员or机构选择改变
            choosePerOrDeptChange(val) {
                this.searchForm = {};
                this.dataList = [] ;
                this.getDataList();
            },
            // 查询条件的展开关闭
            searchchangeadvanced() {
                this.searchadvanced = !this.searchadvanced;
                if (this.searchadvanced) {
                    this.searchheight = "auto";
                }
            },
            // 查询列表
            getDataList() {
                this.dataListLoading = true ;
                logList(
                    Object.assign(
                        {
                            current: this.pageData.pageIndex,
                            size: this.pageData.pageSize,
                            type: this.choosePerOrDept
                        },
                        this.searchForm
                    ),
                    13
                )
                    .then(r => {
                        if (r.data.code == 0) {
                            this.dataListLoading = false ;
                            this.dataList = r.data.data.records ;
                            this.pageData.totalPage = r.data.data.total;
                        }
                    })
                    .catch(err => {});
            },
            // 条数变化
            sizeChangeHandle(val) {
                this.pageData.pageSize = val;
                this.pageData.pageIndex = 1 ;
                this.getDataList();
            },
            // 页码分页变化
            currentChangeHandle(val) {
                this.pageData.pageIndex = val;
                this.getDataList();
            },
            //table表索引
            indexMethod(index) {
                return (this.pageData.pageIndex-1)*this.pageData.pageSize+index+1;
            },
            //返回
            goBack(){
              this.$emit('close')
            }
        }
    };
</script>

<style lang="scss" scoped>
  ::v-deep .el-select .el-select__tags {
    overflow: auto !important;
  }
  ::v-deep.el-tag.el-tag--info {
    margin: 5px;
    border: 1px solid green;
  }
  ::v-deep.el-divider {
    background-color: #b0bde2 !important;
  }
  .weightRed {
    color: rgba(255, 0, 0, 0.726);
  }
  /deep/.el-divider__text, .el-link{font-size: 16px!important;}

</style>
